<!-- 返回/分享组件 -->
<template>
  <view class="back">
    <view class="left">
      <view v-show="props.showBack" @click="toback()" :style="customStyle">
        <text class="iconfont icon-back" style="font-size: 40rpx" />
      </view>
    </view>
    <view class="center">
      <view v-show="props.showTitle">
        <text>{{ props.title }}</text>
      </view>
    </view>
    <view class="right">
      <view v-show="props.showShare" @click="toShare()">
        <text class="iconfont icon-fenxiang" style="font-size: 40rpx" :style="customStyle" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { router } from '@/utils/router';
  import { reactive } from 'vue';

  const props = defineProps({
    showBack: {
      type: Boolean,
      default: () => true,
    },
    showShare: {
      type: Boolean,
      default: () => false,
    },
    showTitle: {
      type: Boolean,
      default: () => false,
    },
    title: {
      type: String,
      default: () => '',
    },
    fontColor: {
      type: String,
      default: () => '#333',
    },
    isBack: {
      type: Boolean,
      default: () => true,
    },
  });

  const emits = defineEmits(['toShare', 'back']);

  const customStyle = reactive({
    color: props.fontColor,
  });

  // 返回
  const toback = () => {
    if (props.isBack) {
      router.back();
    } else {
      emits('back');
    }
  };

  // 分享
  const toShare = () => {
    emits('toShare');
  };
</script>
<style lang="scss" scoped>
  .back {
    padding: 20rpx 20rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100rpx;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;

    font-size: 32rpx;
    font-weight: bold;
  }

  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100rpx;
  }
</style>
